<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 16:15:51
 * @LastEditTime : 2021-09-10 10:23:48
 * @FilePath     : /newhope/src/components/windBlowsTheFragranceOfRice/index.vue
 * @Description  : 
-->

<script setup lang="ts">
import { withDefaults, defineProps, ref } from "vue";
import { useCloundMikeData } from "./hooks/useData";
// import Message from '/@/components/message/index.vue'
import { Gamge, Message } from "/@/components/index";
import { onMounted, onUnmounted } from 'vue'
import windBlowsTheFragranceOfRice from "/@/assets/images/title/windBlowsTheFragranceOfRice.png";
import Title from "/@/components/title/index.vue";
import theWindBlowsTheFragranceOfRice from "/@/assets/images/title/theWindBlowsTheFragranceOfRice.png";
import { useGo } from "/@/hooks/go";
import { PageProps } from "/@/page/gameSuccess/define";
import { mikeChange, mikeClear, clearMikeNum } from "/@/utils/mikeChange";
const [go] = useGo();
let timer = 0
onMounted(() => {
  if (props.status === 2)
    // @ts-ignore
    timer = setTimeout(() => {
      go({
        name: "gameSuccess",
        query: { num: clearMikeNum(mikeList.value).toString() } as PageProps,
      });
    }, 20000)
})
onUnmounted(() => {
  if (props.status === 2)
    clearTimeout(timer)
})
const mikeList = useCloundMikeData();
const props = withDefaults(defineProps<{ status: number }>(), {
  status: 1,
});

function onClickMike(res: { index: number; total: number }) {
  mikeList.value = mikeChange(mikeList.value, res.index);
  if (mikeClear(mikeList.value)) {
    go({
      name: "gameSuccess",
      query: { num: clearMikeNum(mikeList.value).toString() } as PageProps,
    });
  }
}
</script>
<template>
  <div class="windBlowsTheFragranceOfRice">
    <img
      src="../../assets/images/bkg/windBlowsTheFragranceOfRice.png"
      alt="bkg"
      class="bkg pulsate-bck"
    />
    <Title v-if="props.status === 2" :src="windBlowsTheFragranceOfRice" />
    <Message v-else :titleImg="theWindBlowsTheFragranceOfRice" />
    <Gamge @on-mike-click="onClickMike" v-if="props.status === 2" :list="mikeList" />
    <!-- <img
			v-for="mikeItem,mikeIndex in mikeList"
			:key="mikeIndex"
			:src="mikeItem.img"
			:style="mikeItem.style"
    />-->
    <!-- <img :src="f" class="test" /> -->
  </div>
</template>
<style lang="scss" scoped>
.pulsate-bck {
  -webkit-animation: pulsate-bck 1.5s ease-in-out infinite both;
  animation: pulsate-bck 1.5s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.windBlowsTheFragranceOfRice {
  user-select: none;
  position: relative;
  height: 100%;
  width: 100%;
  // background: url("../../assets/images/bkg/windBlowsTheFragranceOfRice.png");
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  .bkg {
    user-select: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
  }
}
.test {
  position: absolute;
  bottom: 16.3%;
  left: 76%;
  width: 6%;
}
</style>
